<template>
  <vue-particles
      id="tsparticles"
      :particlesInit="particlesInit"
      :particlesLoaded="particlesLoaded"
      :options="{
	background: {
		color: {
			value: '#000'
		}
	},
	fpsLimit: 120,
	interactivity: {
		events: {
			onClick: {
				enable: true,
				mode: 'push'
			},
			onHover: {
				enable: true,
				mode: 'repulse'
			},
			resize: true
		},
		modes: {
			bubble: {
				distance: 400,
				duration: 2,
				opacity: 0.8,
				size: 40
			},
			push: {
				quantity: 4
			},
			repulse: {
				distance: 200,
				duration: 0.4
			}
		}
	},
	particles: {
		move: {
			enable: true,
			speed: {
				min: 1,
				max: 6
			}
		},
		number: {
			value: 20,
			max: 30
		},
		opacity: {
			value: 1
		},
		rotate: {
			path: true
		},
		shape: {
			options: {
				image: {
					gif: true,
					height: 200,
					src: 'https://particles.js.org/images/mario.gif',
					width: 200
				}
			},
			type: 'image'
		},
		size: {
			value: {
				min: 32,
				max: 64
			}
		}
	},
	detectRetina: true
}"
  />
</template>
<script setup>
import {loadSlim} from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.

const particlesInit = async engine => {
  //await loadFull(engine);
  await loadSlim(engine);
};

const particlesLoaded = async container => {
  console.log("Particles container loaded", container);
};
</script>